Web Development Local State এবং Global State পরিচালনা গাইড ও নোট

Riot.js তে Local State এবং Global State পরিচালনা একটি সাধারণ এবং শক্তিশালী পদ্ধতি যা আপনাকে UI কম্পোনেন্টের মধ্যে ডেটা পরিচালনা করতে সহায়তা করে। এখানে আমরা Local State এবং Global State পরিচালনার পার্থক্য এবং এর ব্যবস্থাপনা কিভাবে করবেন তা আলোচনা করব।

১. Local State

Riot.js-এ Local State হল এমন একটি স্টেট যা শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের মধ্যে থাকে। এটি কম্পোনেন্টের ডেটা এবং তার আচরণ পরিচালনা করে এবং শুধুমাত্র সেই কম্পোনেন্টের জন্য প্রযোজ্য।

Example: Local State in Riot.js

<!-- LocalStateExample.riot -->
<local-state-example>
  <h2>Local State Example</h2>

  <button onclick={incrementCount}>Increment Count</button>
  <p>Current Count: {state.count}</p>

  <script>
    export default {
      state: {
        count: 0
      },

      incrementCount() {
        this.state.count++; // Local state increment
      }
    }
  </script>
</local-state-example>

এখানে:

• state.count: কম্পোনেন্টের local state হিসেবে count নামের একটি প্রপার্টি রাখা হয়েছে।
• incrementCount(): এই ফাংশনটি state.count ভ্যালু পরিবর্তন করে।
• state: Riot.js কম্পোনেন্টের ভিতরের স্টেট যা অন্য কোন কম্পোনেন্টের কাছে অ্যাক্সেসযোগ্য নয়। এটি শুধুমাত্র বর্তমান কম্পোনেন্টের মধ্যে থাকে।

২. Global State

Global State সাধারণত একটি একক জায়গায় থাকে এবং এটি একাধিক কম্পোনেন্টের মধ্যে শেয়ার করা যায়। Riot.js তে সাধারণত Global State পরিচালনা করার জন্য JavaScript অবজেক্ট, অথবা বিশেষ কোনও স্টোর ব্যবহৃত হতে পারে। একাধিক কম্পোনেন্ট যদি একই ডেটা শেয়ার করতে চায়, তবে গ্লোবাল স্টেট খুবই কার্যকরী।

Example: Global State Using Event Emitters

Riot.js তে গ্লোবাল স্টেট পরিচালনা করতে Event Emitters ব্যবহার করা যেতে পারে। Riot.js এর Riot.observable ফাংশন আপনাকে একটি গ্লোবাল স্টেট বা স্টোর তৈরি করতে সাহায্য করতে পারে, যার মাধ্যমে বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা সম্ভব।

// store.js (Global State)
import Riot from 'riot';

export const store = Riot.observable({
  count: 0,
  incrementCount() {
    this.count++; // Update global state
    this.trigger('state-updated'); // Notify listeners
  }
});

এখানে:

• Riot.observable: একটি গ্লোবাল স্টেট অবজেক্ট তৈরি করা হয়েছে, যা একটি count স্টোর করে এবং incrementCount মেথডের মাধ্যমে স্টেট আপডেট করে।

Example: Accessing Global State in Multiple Components

App.riot (Parent Component):

<!-- App.riot -->
<app>
  <h2>Global State with Riot.js</h2>
  
  <child-component></child-component>
  <child-component></child-component>

  <script>
    import { store } from './store';

    export default {
      onMounted() {
        store.on('state-updated', () => {
          this.updateCountDisplay();
        });
      },

      updateCountDisplay() {
        console.log('Global count:', store.count); // Log the global state
      }
    }
  </script>
</app>

ChildComponent.riot (Child Component):

<!-- ChildComponent.riot -->
<child-component>
  <h3>Child Component</h3>
  <button onclick={incrementGlobalCount}>Increment Global Count</button>

  <script>
    import { store } from './store';

    export default {
      incrementGlobalCount() {
        store.incrementCount(); // Increment the global state
      }
    }
  </script>
</child-component>

এখানে:

• Global State (store.count) একাধিক কম্পোনেন্টে শেয়ার করা হচ্ছে।
• store.incrementCount(): গ্লোবাল স্টেট আপডেট হচ্ছে এবং এর পরিবর্তন state-updated ইভেন্টের মাধ্যমে সমস্ত কম্পোনেন্টে সিগন্যাল পাঠানো হচ্ছে।

৩. Combining Local and Global State

কখনও কখনও, আপনি Local State এবং Global State একসাথে ব্যবহার করতে পারেন। কম্পোনেন্টে নিজের নিজস্ব স্টেট থাকে (Local State), কিন্তু একই সময় গ্লোবাল স্টেটও শেয়ার করা হতে পারে। এতে করে আপনি উভয়ের সুবিধা নিতে পারেন: কম্পোনেন্ট লেভেলে স্বতন্ত্র স্টেট এবং অ্যাপ্লিকেশন লেভেলে শেয়ারড স্টেট।

Example: Using Both Local and Global State

<!-- CombinedState.riot -->
<combined-state>
  <h2>Local and Global State Example</h2>

  <p>Local Count: {state.localCount}</p>
  <button onclick={incrementLocalCount}>Increment Local Count</button>

  <p>Global Count: {store.count}</p>
  <button onclick={incrementGlobalCount}>Increment Global Count</button>

  <script>
    import { store } from './store';

    export default {
      state: {
        localCount: 0
      },

      onMounted() {
        store.on('state-updated', () => {
          this.updateGlobalCount();
        });
      },

      incrementLocalCount() {
        this.state.localCount++; // Update local state
      },

      incrementGlobalCount() {
        store.incrementCount(); // Update global state
      },

      updateGlobalCount() {
        // Optionally, you can sync or react to global state changes
        this.update();
      }
    }
  </script>
</combined-state>

এখানে:

• Local State (state.localCount) এবং Global State (store.count) একসাথে ব্যবহৃত হচ্ছে।
• incrementLocalCount(): শুধু কম্পোনেন্টের স্টেট পরিবর্তন করছে।
• incrementGlobalCount(): গ্লোবাল স্টেট পরিবর্তন করছে এবং পুরো অ্যাপ্লিকেশনে তা প্রতিফলিত হচ্ছে।

৪. Advanced Global State Management

যদি আপনার অ্যাপ্লিকেশন বড় হয় এবং আরো জটিল গ্লোবাল স্টেট ব্যবস্থাপনা প্রয়োজন হয়, তখন আপনি Riot.js এর সাথে একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি ব্যবহার করতে পারেন, যেমন Redux বা MobX। যদিও Riot.js নিজেই গ্লোবাল স্টেট ব্যবস্থাপনা সহজ করতে পারে, আপনি প্রোজেক্টের স্কেল অনুযায়ী এই ধরনের লাইব্রেরি ব্যবহার করতে পারেন।

সারাংশ

• Local State হল এমন স্টেট যা শুধুমাত্র একটি কম্পোনেন্টের মধ্যে থাকে এবং সেই কম্পোনেন্টের আচরণ এবং ডেটা পরিচালনা করে।
• Global State হল এমন স্টেট যা একাধিক কম্পোনেন্টের মধ্যে শেয়ার করা যায় এবং এটি একটি কেন্দ্রীভূত জায়গায় থাকে।
• Riot.observable এর মাধ্যমে গ্লোবাল স্টেট তৈরি করা এবং শেয়ার করা যায়।
• Riot.js-এ Local State এবং Global State এর সঠিক ব্যবহার অ্যাপ্লিকেশনকে আরও সুনির্দিষ্ট, রক্ষণাবেক্ষণযোগ্য এবং স্কেলযোগ্য করে তোলে।